import { injectGlobal } from '@emotion/css';

export const unit = 8;
export const colors = {
  primary: '#220a82',
  secondary: '#14cbc4',
  accent: '#e535ab',
  background: '#f7f8fa',
  grey: '#d8d9e0',
  text: '#343c5a',
  textSecondary: '#747790',
};

const styles = () =>
  injectGlobal({
    [['html', 'body']]: {
      height: '100%',
    },
    body: {
      margin: 0,
      padding: 0,
      fontFamily: "'Source Sans Pro', sans-serif",
      backgroundColor: colors.background,
      color: colors.text,
    },
    '#root': {
      display: 'flex',
      flexDirection: 'column',
      minHeight: '100%',
    },
    '*': {
      boxSizing: 'border-box',
    },
    [['h1', 'h2', 'h3', 'h4', 'h5', 'h6']]: {
      margin: 0,
      fontWeight: 600,
    },
    h1: {
      fontSize: 48,
      lineHeight: 1,
    },
    h2: {
      fontSize: 40,
    },
    h3: {
      fontSize: 36,
    },
    h5: {
      fontSize: 16,
      textTransform: 'uppercase',
      letterSpacing: 4,
    },
  });

export default styles;
